<!-- 新的档案管理模块archive-manage-new -->
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import ARCHIVE_TYPE_FOLDER from '/@/assets/image/icon/archive-type-folder.png';
import ARCHIVE_TYPE_IMAGE from '/@/assets/image/icon/archive-type-image.png';
import ARCHIVE_TYPE_DOC from '/@/assets/image/icon/archive-type-doc.png';
import ARCHIVE_TYPE_PDF from '/@/assets/image/icon/archive-type-pdf.png';
import ARCHIVE_TYPE_PPT from '/@/assets/image/icon/archive-type-ppt.png';
import ARCHIVE_TYPE_XLS from '/@/assets/image/icon/archive-type-xls.png';
import { QUERY_DOSSIER_LIST } from '/@/api/modules/archive/police/dossier-manager';

/**
 * 文件类型 1.docx 2.doc 3xlsx 4.xls 5.pptx 6.ppt 7.pdf 8.jpg 9.png
 */
const ARCHIVE_FILE_TYPE = {
  1: ARCHIVE_TYPE_DOC,
  2: ARCHIVE_TYPE_DOC,
  3: ARCHIVE_TYPE_XLS,
  4: ARCHIVE_TYPE_XLS,
  5: ARCHIVE_TYPE_PPT,
  6: ARCHIVE_TYPE_PPT,
  7: ARCHIVE_TYPE_PDF,
  8: ARCHIVE_TYPE_IMAGE,
  9: ARCHIVE_TYPE_IMAGE,
};

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
  }>(),
  {
    modelValue: false,
  },
);

const emits = defineEmits<{
  (e: 'update:modelValue'): void;
  (e: 'onSelected', archiveId?: string, archiveName?: string): void;
}>();
const state = reactive<{
  /**
   * 父文件夹id
   */
  dossierTypeId: string;
  /**
   * 文件夹列表
   */
  typeList: DossierManager.typeDto[];
  /**
   * 文件列表
   */
  dtoList: DossierManager.fileDto[];
  /**
   * 选择的文件夹
   */
  selectedTypeList: DossierManager.typeDto[];
}>({
  dossierTypeId: '',
  typeList: [],
  dtoList: [],
  selectedTypeList: [],
});
/**
 * @description 消息列表查询
 * @param {Number} page -当前页
 * @param {Number} pageSize -每页条数
 */
function queryList() {
  QUERY_DOSSIER_LIST({
    dossierTypeId: state.dossierTypeId,
    type: 3,
    flag: 1,
  }).then((res) => {
    res.typeList?.forEach((item) => state.typeList.push(item));
    res.dtoList?.forEach((item) => state.dtoList.push(item));
  });
}

/**
 * 进入子目录
 * @param id 文档id
 */
function next(item: DossierManager.typeDto) {
  state.dossierTypeId = item.id || '';
  refreshList();
  state.selectedTypeList.push(item);
}

/**
 * 刷新列表
 */
function refreshList() {
  state.typeList = [];
  state.dtoList = [];
  queryList();
}

onMounted(() => {
  state.dossierTypeId = '';
  refreshList();
  state.selectedTypeList = [];
  state.selectedTypeList.push({
    id: '',
    dossierTypeName: '根目录',
  });
});

/**
 * 导航
 * @param index
 */
function navigation(index: number) {
  //删除的数量
  const count = state.selectedTypeList.length - (index + 1);
  state.selectedTypeList.splice(index + 1, count);
  state.dossierTypeId = state.selectedTypeList[index].id || '';
  refreshList();
}
</script>

<template>
  <nut-popup
    round
    position="bottom"
    :style="{ height: '70vh' }"
    :visible="props.modelValue"
    @click-overlay="emits('update:modelValue')"
  >
    <view class="app-archive-list-popup">
      <scroll-view class="horizontal-scroll-view" :scroll-x="true">
        <view
          v-for="(item, index) in state.selectedTypeList"
          :key="item.id"
          class="app-archive-list-popup__navigation-item"
          @click="navigation(index)"
        >
          <text :style="{ color: index === state.selectedTypeList.length - 1 ? '#333' : '#999' }"
            >{{ item.dossierTypeName
            }}{{ index != state.selectedTypeList.length - 1 ? '>' : '' }}</text
          >
        </view>
      </scroll-view>
      <scroll-view
        class="app-page__wrapper"
        :style="{ height: '64vh' }"
        :scroll-y="true"
        :lower-threshold="100"
      >
        <view class="app-archive-list-popup__wrapper">
          <nut-cell-group>
            <nut-cell v-for="item in state.typeList" :key="item.id" @click="next(item)">
              <template v-slot:title>
                <view class="app-archive-list-popup__left">
                  <view>
                    <nut-avatar size="small" shape="square">
                      <image :src="ARCHIVE_TYPE_FOLDER" />
                    </nut-avatar>
                  </view>
                  <view class="app-archive-list-popup__left--title">
                    <view>
                      <text>{{ item.dossierTypeName || '' }}</text>
                    </view>
                    <view class="app-archive-list-popup__count">
                      <text>文档:&nbsp;&nbsp;{{ item.num || 0 }}</text>
                    </view>
                  </view>
                </view>
              </template>
            </nut-cell>
          </nut-cell-group>

          <nut-cell-group>
            <nut-cell
              v-for="item in state.dtoList"
              :key="item.id"
              @click="
                () => {
                  emits('onSelected', item.id, item.name);
                  emits('update:modelValue');
                }
              "
            >
              <template v-slot:title>
                <view class="app-archive-list-popup__left">
                  <view>
                    <nut-avatar size="small" shape="square">
                      <image :src="ARCHIVE_FILE_TYPE[item.category || 9]" />
                    </nut-avatar>
                  </view>
                  <view class="app-archive-list-popup__left--title">
                    <view>
                      <text>{{ item.name || '' }}</text>
                    </view>
                  </view>
                </view>
              </template>
              <template v-slot:link>
                <view class="app-archive-list-popup__right">
                  <text>选择</text>
                </view>
              </template>
            </nut-cell>
          </nut-cell-group>
        </view>
      </scroll-view>
    </view>
  </nut-popup>
</template>

<style lang="scss">
@import './index.scss';
</style>
